//轮播图模块

 (function(){
   var start = function(){
    var banner_box = document.getElementsByClassName("banner-box")[0],//轮播图视口
    banner = banner_box.getElementsByClassName("banner")[0],//图片列表
    bannerStyle = window.getComputedStyle(banner,null),//图片列表属性
    bannerChildlen = (function(){var list = banner.children.length; return list;}()),//图片数量
    banner_boxWidth = (function(){var len = banner_box.clientWidth;return len;}()),//每张图片长度
    time = null,//计时器变量名
    lastTag = null,
    index = 0,//索引值。
    lastindex = 0,
    nowindex = 0,
    oIndexlist = banner_box.getElementsByClassName("index-dian")[0],
    activeIndex = oIndexlist.getElementsByTagName("li"),
    oIndex_arr = [];

  
    
        
    var bannermove = function(){//移动函数
        index ++;
        banner.style.left =  (- (index*banner_boxWidth)) + "px";            
    };

    var moveEnd = function(){//轮播图到最后一张时回到第一张的位置
        if(index === bannerChildlen-1 ){
            banner.style.left = 0;                        
            banner.style.transition = "none";
            index = 0; 
            setTimeout(function(){banner.style.transition = "left .3s";},0);
        };
       
    };

    var startmove = function(){//开始移动。
        
        arr();
        banner.addEventListener("transitionend",moveEnd);//过度完后执行。
        move();
        clickoIndexList();
    };

    
   var move = function(){
    time = setInterval(banner_oIndex_change,3000);
   };
   

   var banner_oIndex_change = function(){
       bannermove();
       oIndexchange();
       
   };

    // //图片小点跟随
    var oIndexchange = function(){
        var nowindex = index % (bannerChildlen-1);
        activeIndex[nowindex].classList.add("active");
        activeIndex[lastindex].className = "dot";
        lastindex = nowindex;
    
 };
 var arr = function(){
     for(var i = 0; i < bannerChildlen - 1; i ++){
         oIndex_arr.push(oIndexlist.children[i]);
     }
     
 }
  
    var clickoIndexList = function(){
   
     oIndexlist.onclick = function(e){
         var target = e.target;
         console.log(target.classList.item(0));
          var activename = target.classList.contains('active');
          if(activename){return;}
         for(var i = 0; i < bannerChildlen-1; i++){

             if(oIndex_arr[i] === target){
            
                clearInterval(time);               
                 index = i;
                 banner.style.left = (-i*banner_boxWidth) + "px";
                 oIndexchange();
                 move(); 
             }
         }
     }
      
    
};
startmove();
};
   setTimeout(start,1000);
  
}());



